<template>
  <div class="detail-container">
    <!-- head return-->
    <div class="detail-head">
      <van-nav-bar title="订单详情" style="background: #ededed">
        <template #left>
          <van-icon name="arrow-left" size="24" color="black" @click="$router.go(-1)" />
        </template>
      </van-nav-bar>
    </div>

    <div class="detail-content" v-if="orderDetail" ref="detail">
      <div class="add-info" v-if="orderDetail.invoice.delivery_charge > 0">
        <div class="add-info-box">
          <div class="add-box">
            <div class="add-text">
              <span>配送地址:</span>
              <span>{{ orderDetail.invoice.to_address.address1 + orderDetail.invoice.to_address.address2 }}</span>
            </div>
            <div class="user-text">
              <span>{{ orderDetail.invoice.to_address.name + ' ' + orderDetail.invoice.to_address.salute + ' ' }} {{ orderDetail.invoice.to_address.phone_number }}</span>
            </div>
          </div>
          <a class="shops-tel" href="tel:18980082791">
            <van-icon name="phone-o" />
            <span>联系商家</span>
          </a>
        </div>
      </div>

      <div class="order-info">
        <div class="order-info-box">
          <div class="state-box">
            <div class="order-state">
              <span class="status-title">订单状态:</span>
              <van-icon name="checked" v-show="orderDetail.status === 'paid'" />
              <van-icon name="clear" v-show="orderDetail.status === 'voided'" />
              <span>{{ orderDetail.status | orderStatus }}</span>
            </div>
            <div class="order-date">
              <span style="margin-bottom: 0.3em; color: #ffbf05; font-size: 1.1em; font-weight: 500" v-show="!isPaid">{{ orderDetail.status }}:</span>
              <span style="color: #a8a8a8; margin-right: 0.6em" v-show="isPaid">完成时间:</span>
              <span>{{ orderDetail | completeDate }}</span>
            </div>
            <div class="submit-date">
              <span>下单时间:</span>
              <span>{{ orderDetail.created_at }}</span>
            </div>
            <div class="serial-number">
              <span>订单编号:</span>
              <span>{{ orderDetail | orderRefId }}</span>
            </div>
          </div>
          <div class="take-number" v-show="orderDetail.invoice.delivery_charge === 0">
            <span>取餐号</span>
            <span>{{ orderDetail.invoice.call_num }}</span>
          </div>
        </div>
      </div>

      <div class="goods-info">
        <div class="logo-box">
          <div class="logo-img">
            <img :src="shopsItem.picture_url" alt="logo" />
          </div>
          <div>{{ shopsItem.name }}</div>
        </div>
        <div class="goods-lists" v-for="(item, index) in orderDetail.invoice.invoice_line" :key="index">
          <van-card
            :num="item.quantity"
            :price="item.subtotal + '.00'"
            :desc="item.subtotal !== item.subtotal_before_discount ? '￥' + item.subtotal_before_discount + '.00' : ''"
            :title="item.item.name"
            :thumb="item.item.image_thumbnail_cdn === null || item.item.image_thumbnail_cdn === undefined ? localImg : item.item.image_thumbnail_cdn"
          />
        </div>
        <div class="discount-box" v-show="false">
          <span>优惠券</span>
          <span>$0</span>
        </div>
        <div class="discount-box" v-show="orderDetail.invoice.discount_amount > 0">
          <span>折扣</span>
          <span>${{ orderDetail.invoice.discount_amount }}</span>
        </div>
        <div class="charge-box" v-show="orderDetail.invoice.subtotal > 0">
          <span>小计</span>
          <span>${{ orderDetail.invoice.subtotal }}</span>
        </div>
        <div class="charge-box" v-show="orderDetail.invoice.tax > 0">
          <span>税</span>
          <span>${{ orderDetail.invoice.tax }}</span>
        </div>
        <div class="charge-box" v-show="orderDetail.invoice.delivery_charge > 0">
          <span>配送费</span>
          <span>${{ orderDetail.invoice.delivery_charge }}</span>
        </div>
        <div class="charge-box" v-show="orderDetail.invoice.service_charge > 0">
          <span>服务费</span>
          <span>${{ orderDetail.invoice.service_charge }}</span>
        </div>
        <div class="balance-box" v-show="orderDetail.minus_credit > 0">
          <span>使用余额</span>
          <span>${{ orderDetail.minus_credit }}</span>
        </div>
      </div>

      <div class="paySum-info">
        <div class="sum-text">
          <span>实际付款</span>
          <span>${{ orderDetail.invoice.grand_total }}</span>
        </div>
      </div>

      <div class="methods-info">
        <div class="take-type">
          <span>取餐方式</span>
          <span>{{ takeFood }}</span>
        </div>
        <div class="pay-type">
          <span>支付方式</span>
          <span>{{ payMethod }}</span>
        </div>
      </div>

      <div class="remark-info">
        <div class="remark-text">
          <span>偏好及口味的备注</span>
          <span>无</span>
        </div>
      </div>

      <div class="bottom-box"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'OrderDetail',
  data() {
    return {
      localImg: 'static/img/mxbc/Ice_Cream/Purple_Potato_Latte.jpeg'
    }
  },
  filters: {
    orderStatus(val) {
      if (val === 'paid') return '订单完成'
      return val
    },
    orderRefId(item) {
      if (item.status === 'paid') return item.invoice.ref_id
      if (item.status === 'voided') return ''
      return item.order_ref
    },
    completeDate(item) {
      var date = ''
      switch (item.status) {
        case 'paid':
          date = item.invoice.datetime_close
          break
        case 'voided':
          date = ''
          break
        default:
          date = item.meta.placed_at
      }
      return date
    }
  },
  computed: {
    ...mapState({
      shopsItem: state => state.home.shopsItem
    }),
    orderDetail() {
      return this.$route.params.item
    },
    // 获取判定是否为已支付订单
    isPaid() {
      return this.$route.params.isPaid
    },
    takeFood() {
      var item = this.orderDetail
      if (item.invoice.delivery_charge > 0) return '外卖'
      if (item.invoice.service_charge > 0) return '自提'
      return '堂食'
    },
    payMethod() {
      var item = this.orderDetail
      if (item.invoice.payment_source_last4) return item.invoice.payment_source_method + '****' + item.invoice.payment_source_last4
      return '****'
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.detail-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}

.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}

.detail-head {
  position: fixed;
  width: 100%;
  z-index: 1;
}
.detail-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  background-color: #ededed;
  .add-info,
  .order-info,
  .goods-info,
  .paySum-info,
  .methods-info,
  .remark-info {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 46px;
    width: 98%;
    border-radius: 9px;
    background-color: white;
    margin-bottom: 0.4em;
  }
  .add-info {
    display: flex;
    justify-content: center;
    height: 78px;
    .add-info-box {
      display: flex;
      align-items: center;
      width: 95%;
      .add-box {
        display: flex;
        flex-direction: column;
        width: 85%;
        height: 90%;
        .add-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 100%;
          height: 65%;
          span:nth-child(1) {
            font-size: 0.8em;
            color: #969696;
          }
          span:nth-child(2) {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 0.85em;
            color: #545454;
            width: 96%;
            height: 30%;
            margin-top: 0.3em;
          }
        }
        .user-text {
          display: flex;
          align-items: center;
          width: 100%;
          height: 35%;
          span:nth-child(1) {
            font-size: 0.8em;
            color: #545454;
            margin-right: 0.6em;
          }
        }
      }
      .shops-tel {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 15%;
        /deep/.van-icon-phone-o {
          font-size: 1.8em;
          color: #545454;
        }
        span:nth-child(2) {
          font-size: 0.8em;
          white-space: nowrap;
          color: #8a8a8a;
        }
      }
    }
  }
  .order-info {
    display: flex;
    justify-content: center;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    .order-info-box {
      display: flex;
      align-items: center;
      width: 95%;
      .state-box {
        width: 85%;
        height: 90%;
        .order-state {
          display: flex;
          align-items: center;
          height: 30%;
          margin-bottom: 0.3em;
          /deep/.van-icon-checked,
          .van-icon-clear {
            color: orange;
            font-size: 1.2em;
            margin-left: 0.3em;
            margin-right: 0.3em;
          }
          .van-icon-clear {
            color: red;
          }
          .van-icon {
            margin: 0;
            margin-right: 0.3em;
          }
          span {
            margin-right: 0.6em;
            font-size: 0.8em;
            color: #a8a8a8;
          }
        }
        .order-date,
        .submit-date,
        .serial-number {
          display: flex;
          align-items: center;
          height: 22%;
          line-height: 21px;
          font-size: 0.8em;
          span:nth-child(1) {
            white-space: nowrap;
            margin-right: 0.6em;
            color: #a8a8a8;
          }
          span:nth-child(2) {
            color: #3b3b3b;
          }
        }
        .serial-number {
          display: flex;
          align-items: flex-start;
        }
      }
      .take-number {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 15%;
        span:nth-child(1) {
          color: #a8a8a8;
          font-size: 0.8em;
        }
        span:nth-child(2) {
          color: orange;
          font-size: 1.5em;
          margin-top: 0.3em;
        }
      }
    }
  }
  .goods-info {
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5em;
    .logo-box {
      display: flex;
      align-items: center;
      width: 95%;
      height: 45px;
      .logo-img {
        overflow: hidden;
        width: 30px;
        height: 30px;
        border-radius: 6px;
        margin-right: 0.9em;
      }
      img:nth-child(1) {
        width: 100%;
        height: 100%;
      }
    }
    .goods-lists {
      width: 95%;
      height: 69px;
      border-bottom: 0.06em solid #ebebeb;
      margin-bottom: 0.5em;
      /deep/.van-card {
        width: 100%;
        height: 100%;
        background-color: white;
        padding-left: 0;
        padding-right: 0;
      }
      /deep/.van-card__header {
        width: 100%;
        height: 100%;
      }
      /deep/.van-card__content {
        height: 100%;
        min-height: 100%;
      }
      /deep/.van-card__thumb {
        width: 54px;
        height: 54px;
      }
      /deep/.van-card__num {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 1.2em;
      }
      /deep/.van-card__price {
        position: absolute;
        right: 0;
        bottom: 0;
        color: red;
        font-size: 1.1em;
      }
      /deep/.van-card__price-integer,
      .van-card__price-currency {
        font-size: 1.2em;
      }
      /deep/.van-card__price-decimal,
      .van-card__title {
        font-size: 1.1em;
      }
      /deep/.van-card__desc {
        position: absolute;
        right: 0;
        bottom: 2em;
        color: #a8a8a8;
        text-decoration: line-through;
      }
    }
    .charge-box,
    .discount-box,
    .balance-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 95%;
      height: 27px;
      span:nth-child(1) {
        color: #545454;
      }
      span:nth-child(2) {
        color: #a8a8a8;
      }
    }
    .balance-box {
      span:nth-child(1) {
        color: red;
      }
      span:nth-child(2) {
        color: red;
        font-weight: 600;
      }
    }
    .discount-box {
      span:nth-child(2) {
        color: red;
      }
    }
  }
  .paySum-info,
  .remark-info {
    height: 40px;
    .sum-text,
    .remark-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 95%;
      span:nth-child(1) {
        color: #545454;
      }
      span:nth-child(2) {
        color: #a8a8a8;
      }
    }
    .sum-text span:nth-child(2) {
      color: #545454;
    }
  }
  .methods-info {
    display: flex;
    flex-direction: column;
    height: 70px;
    .take-type,
    .pay-type {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 95%;
      height: 40%;
      span {
        color: #545454;
      }
    }
  }
  .bottom-box {
    position: relative;
    top: 40px;
    width: 100%;
    height: 30px;
    background-color: #ededed;
  }
}
</style>
